:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--text-color: #333;
--light-color: #ecf0f1;
}
.top-header {
background-color: #2c3e50;
color: white;
padding: 8px 0;
font-size: 14px;
}


 body {
     font-family: 'Roboto', sans-serif;
     color: #333;
     line-height: 1.6;
     overflow-x: hidden;
 }


.top-header a {
color: white;
text-decoration: none;
}
.top-header a:hover {
color: var(--secondary-color);
}
 .bg-primary-custom {
     background-color: var(--primary-color);
 }

 .text-primary-custom {
     color: var(--primary-color);
 }

 .section-heading {
     color: #064727;
     font-size: 28px;
     font-weight: 600;
     margin-bottom: 15px;
 }

 .heading-border {
     height: 3px;
     width: 100px;
     background-color: #ffc600;
     margin: 10px 0 20px;
 }
/* Logo */
.logo-container {
    padding: 15px 0;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center; /* Added for extra centering */
}

.logo-img {
    max-height: 150px;
    width: auto;
    margin: 0 auto; /* Centers the image horizontally */
    display: block; /* Needed for margin auto to work */
}

.logo-text, .logo-text-hindi {
    text-align: center; /* Ensure text is centered */
    width: 100%; /* Full width for proper centering */
    font-weight: 550;
}

/* Navigation */
.navbar {
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar-nav {
margin: 0 auto;
display: flex;
justify-content: center;
}
.navbar-nav .nav-link {
color: var(--primary-color);
font-weight: 600;
padding: 10px 15px;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: var(--secondary-color);
}
.dropdown-menu {
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-custom {
background-color: var(--secondary-color);
color: white;
padding: 12px 30px;
border-radius: 50px;
font-weight: 600;
border: none;
transition: all 0.3s;
}
.btn-custom:hover {
background-color: var(--primary-color);
transform: translateY(-3px);
}
.dropdown-menu {
     border: none;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 .carousel {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
 /* Mobile Toggler Improvements */
 .navbar-toggler {
     border: none;
     padding: 0.5rem;
 }
 
 .navbar-toggler:focus {
     box-shadow: none;
 }
 
 .navbar-toggler-icon {
     background-image: none;
     width: 1.5em;
     height: 1.5em;
     position: relative;
     transition: all 0.3s ease;
 }
 
 .navbar-toggler-icon::before,
 .navbar-toggler-icon::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 2px;
     background-color: #333;
     transition: all 0.3s;
 }
 
 .navbar-toggler-icon::before {
     top: 0.25em;
     transform: rotate(0);
 }
 
 .navbar-toggler-icon::after {
     bottom: 0.25em;
     transform: rotate(0);
 }
 
 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
     transform: rotate(45deg);
     top: 0.65em;
 }
 
 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
     transform: rotate(-45deg);
     bottom: 0.65em;
 }
 /* Navigation Center Alignment */
 .navbar-nav {
     margin: 0 auto;
     display: flex;
     justify-content: center;
 }
 
 .dropdown-menu {
     text-align: center;
 }
 .principal-card {
     background-color: white;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }

 .principal-card:hover {
     transform: translateY(-5px);
 }

 .notice-scroll,
 .event-scroll {
     height: 300px;
     overflow-y: auto;
     padding-right: 10px;
 }

 .notice-scroll::-webkit-scrollbar,
 .event-scroll::-webkit-scrollbar {
     width: 5px;
 }

 .notice-scroll::-webkit-scrollbar-track,
 .event-scroll::-webkit-scrollbar-track {
     background: #f1f1f1;
 }

 .notice-scroll::-webkit-scrollbar-thumb,
 .event-scroll::-webkit-scrollbar-thumb {
     background: #68bb59;
 }

 .event-item {
     padding: 10px;
     background-color: #f8f9fa;
     border-radius: 5px;
     transition: all 0.3s ease;
 }

 .event-item:hover {
     background-color: #e9ecef;
     transform: translateX(5px);
 }

 .event-date {
     min-width: 70px;
 }

 .course-card {
     transition: transform 0.3s;
 }

 .course-card:hover {
     transform: translateY(-5px);
 }

 .partner-logo {
     max-height: 60px;
     max-width: 120px;
     object-fit: contain;
     transition: filter 0.3s;
    
     opacity: 0.7;
 }

 .partner-logo:hover {
     filter: grayscale(0%);
     opacity: 1;
 }

 .gallery-img {
     height: 200px;
     object-fit: cover;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .gallery-img:hover {
     transform: scale(1.05);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }
/* Marquee */
.marquee-container {
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.marquee-content {
display: inline-block;
padding-left: 100%;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}


 .testimonial-card {
     padding: 30px;
     margin: 0 15px;
     transition: all 0.3s ease;
 }

 .testimonial-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .footer {
     background-color: #1f2836;
 }

 .footer h3 {
     font-size: 20px;
     margin-bottom: 20px;
     position: relative;
     padding-bottom: 10px;
 }

 .footer h3::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 50px;
     height: 2px;
     background-color: #68bb59;
 }

 .social-icons li {
     margin-right: 10px;
 }

 .social-icons a {
     display: inline-block;
     width: 36px;
     height: 36px;
     line-height: 36px;
     text-align: center;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.1);
     transition: all 0.3s;
 }

 .social-icons a:hover {
     background-color: #68bb59;
     color: white !important;
     transform: rotate(360deg);
 }

 .contact-info i {
     width: 20px;
     text-align: center;
 }

 /* Notification Marquee */
 .notification-scroll {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .marquee {
     display: inline-block;
     animation: marquee 15s linear infinite;
     padding-left: 100%;
 }
 
 @keyframes marquee {
     0% { transform: translateX(0); }
     100% { transform: translateX(-100%); }
 }

 /* Mobile Notification Marquee */
 .mobile-notification {
     background-color: var(--primary-color);
     color: white;
     padding: 8px 0;
     overflow: hidden;
 }
 
 .mobile-marquee {
     display: inline-block;
     white-space: nowrap;
     animation: mobileMarquee 20s linear infinite;
     padding-left: 100%;
 }
 
 @keyframes mobileMarquee {
     0% { transform: translateX(0); }
     100% { transform: translateX(-100%); }
 }

 /* Mobile Toggler Improvements */
 .navbar-toggler {
     border: none;
     padding: 0.5rem;
 }
 
 .navbar-toggler:focus {
     box-shadow: none;
 }
 
 .navbar-toggler-icon {
     background-image: none;
     width: 1.5em;
     height: 1.5em;
     position: relative;
     transition: all 0.3s ease;
 }
 
 .navbar-toggler-icon::before,
 .navbar-toggler-icon::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 2px;
     background-color: #333;
     transition: all 0.3s;
 }
 
 .navbar-toggler-icon::before {
     top: 0.25em;
     transform: rotate(0);
 }
 
 .navbar-toggler-icon::after {
     bottom: 0.25em;
     transform: rotate(0);
 }
 
 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
     transform: rotate(45deg);
     top: 0.65em;
 }
 
 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
     transform: rotate(-45deg);
     bottom: 0.65em;
 }

 /* Navigation Center Alignment */
 .navbar-nav {
     margin: 0 auto;
     display: flex;
     justify-content: center;
 }
 
 .dropdown-menu {
     text-align: center;
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
     .logo-text {
         font-size: 20px;
     }

     .logo-subtext {
         font-size: 16px;
     }

     .section-heading {
         font-size: 24px;
     }

     .heading-border {
         width: 70px;
     }

     .notice-scroll,
     .event-scroll {
         height: 250px;
     }

     .gallery-img {
         height: 180px;
     }

     .testimonial-card {
         padding: 20px 15px;
     }
     
     .top-header {
         display: none !important;
     }
     
     .mobile-notification {
         display: block !important;
     }
     
     .navbar-nav {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }
     
     .nav-link::after {
         left: 50%;
         transform: translateX(-50%);
     }
     
     .nav-link:hover::after,
     .nav-link.active::after {
         width: 50%;
     }
     
     .mobile-login-links {
         padding: 10px;
         background-color: #f8f9fa;
         border-radius: 5px;
         margin-top: 10px;
     }
     
     .mobile-login-links .list-inline-item {
         display: block;
         padding: 5px 0;
         border: none !important;
     }
     
     .mobile-login-links a {
         color: #000 !important;
         padding: 8px 0;
         display: block;
     }
     
     .mobile-login-links .list-inline-item {
         margin-right: 0;
         padding: 5px 0;
         border-bottom: 1px solid #eee;
     }
     
     .mobile-login-links .list-inline-item:last-child {
         border-bottom: none;
     }
 }
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .logo-text {
         font-size: 20px;
     }

     .logo-subtext {
         font-size: 16px;
     }

     .section-heading {
         font-size: 24px;
     }

     .heading-border {
         width: 70px;
     }

     .notice-scroll,
     .event-scroll {
         height: 250px;
     }

     .gallery-img {
         height: 180px;
     }

     .testimonial-card {
         padding: 20px 15px;
     }
     
     .top-header {
         display: none !important;
     }
     
     .mobile-notification {
         display: block !important;
     }
     
     .navbar-nav {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }
     
     .nav-link::after {
         left: 50%;
         transform: translateX(-50%);
     }
     
     
     
     .mobile-login-links {
         padding: 10px;
         background-color: #f8f9fa;
         border-radius: 5px;
         margin-top: 10px;
     }
     
     .mobile-login-links .list-inline-item {
         display: block;
         padding: 5px 0;
         border: none !important;
     }
     
     .mobile-login-links a {
         color: #57637c !important;
         padding: 8px 0;
         display: block;
         font-weight: 600;
         padding-left: 114px;
     }
     
     .mobile-login-links .list-inline-item {
         margin-right: 0;
         padding: 5px 0;
         border-bottom: 1px solid #eee;
     }
     
     .mobile-login-links .list-inline-item:last-child {
         border-bottom: none;
     }
 }

 @media (min-width: 769px) {
     .mobile-notification {
         display: none !important;
     }
 }

 @media (max-width: 991.98px) {
     .navbar-collapse {
         background-color: white;
         padding: 10px;
         border-radius: 5px;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     }

     .dropdown-menu {
         border: none;
         background-color: #f8f9fa;
         box-shadow: none;
         text-align: left;
     }
 }

 @media (min-width: 768px) {
     .section-heading {
         font-size: 32px;
     }

     .gallery-img {
         height: 220px;
     }

 }

 @media (min-width: 992px) {
     .section-heading {
         font-size: 36px;
     }

     .heading-border {
         width: 100px;
     }

     .navbar .nav-link {
         padding: 15px 20px !important;
     }

     .gallery-img {
         height: 250px;
     }
     
     .navbar-nav {
         flex-wrap: wrap;
     }
 }

 @media (min-width: 1200px) {
     .gallery-img {
         height: 280px;
     }

     .partner-logo {
         max-height: 70px;
         max-width: 140px;
     }
 }

 @media (max-width: 768px) {
    .logo-img {
        max-height: 120px; /* Slightly smaller on mobile */
        margin-bottom: 15px;
    }
    
    .logo-text {
        font-size: 1.3rem; /* Adjusted for mobile */
    }
    
    .logo-text-hindi {
        font-size: 1.1rem; /* Adjusted for mobile */
    }
}